<template>
    <div class="wraper">
        <div class="column" :style="{ transform: `translateY(${-lineHeight * index6}px)` }">
            <div class="num" v-for="(item, index) in arr6" :key="index">{{ item }}</div>
        </div>
        <div class="column" :style="{ transform: `translateY(${-lineHeight * index5}px)` }">
            <div class="num" v-for="(item, index) in arr5" :key="index">{{ item }}</div>
        </div>
        <div>:</div>
        <div class="column" :style="{ transform: `translateY(${-lineHeight * index4}px)` }">
            <div class="num" v-for="(item, index) in arr4" :key="index">{{ item }}</div>
        </div>
        <div class="column" :style="{ transform: `translateY(${-lineHeight * index3}px)` }">
            <div class="num" v-for="(item, index) in arr3" :key="index">{{ item }}</div>
        </div>
        <div>:</div>
        <div class="column" :style="{ transform: `translateY(${-lineHeight * index2}px)` }">
            <div class="num" v-for="(item, index) in arr2" :key="index">{{ item }}</div>
        </div>
        <div class="column" :style="{ transform: `translateY(${-lineHeight * index1}px)` }">
            <div class="num" v-for="(item, index) in arr1" :key="index">{{ item }}</div>
        </div>
    </div>
</template>
   
<script>
import {
    defineComponent,
    reactive,
    watch,
    toRefs,
    onMounted,
} from 'vue'
export default defineComponent({
    setup() {
        /************************ todo-定义数据data(START) ************************/
        const data = reactive({
            lineHeight: 28, //跟字体大小和wraper的高度相关！
            // 秒
            arr1: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            index1: 0, //就是获取真实时间后的起始数字
            arr2: [0, 1, 2, 3, 4, 5],
            index2: 0,
            // 分
            arr3: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            index3: 0,
            arr4: [0, 1, 2, 3, 4, 5],
            index4: 0,
            // 时
            arr5: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            index5: 0,
            arr6: [0, 1, 2],
            index6: 0
        })
        /************************ todo-定义数据data(END) ************************/
        /************************ todo-生命周期(START) ************************/
        const timer = ref(null)
        onMounted(() => {
            getTime()
            document.addEventListener('visibilitychange', getTime);
        })
        onUnmounted(() => {
            clearInterval(timer.value);  // 清除定时器

            document.removeEventListener('visibilitychange', getTime);
        })
        //watch监听机型
        watch(
            () => data.index5,
            (newVal) => {
                // 超过24小时
                if (data.index6 === 2 && newVal === 4) {
                    for (let i = 1; i < 7; i++) {
                        data[`index${i}`] = 0
                    }
                }
            },
        )

        /************************ todo-生命周期(END) ************************/
        /************************ todo-methods(START) ************************/
        function getTime() {
            clearInterval(timer.value);  // 清除定时器
            // console.log('getTime')
            const date = new Date()
            let hour = bu0(date.getHours())
            let minute = bu0(date.getMinutes())
            let second = bu0(date.getSeconds())

            // 秒
            data.index1 = +second[1]
            data.index2 = +second[0]
            // 分
            data.index3 = +minute[1]
            data.index4 = +minute[0]
            // 时
            data.index5 = +hour[1]
            data.index6 = +hour[0]

            timer.value = setInterval(turnSecond, 1000)
        }

        function turnSecond() {
            let length = data.arr1.length
            if (data.index1 === length - 1) {
                // 通知前一位移动
                turnOther(2)
                data.index1 = -1
            }
            data.index1++
        }

        function bu0(num) {
            let str
            if (num < 10) str = `0${num}`
            else str = `${num}`
            return str.split('')
        }

        function turnOther(type) {
            let length = data[`arr${type}`].length
            // type代表第几组数列，例如2，就是从右往左第二列
            if (data[`index${type}`] === length - 1) {
                // console.log(type)
                // 通知前一位移动
                let next = type + 1
                turnOther(next, data[`arr${next}`].length)

                data[`index${type}`] = -1
            }
            data[`index${type}`]++
        }
        /************************ todo-methods(END) ************************/

        return {
            //数据
            ...toRefs(data),
        }
    }
})
</script>
   
<style scoped>
.wraper {
    text-align: center;
    background: transparent;
    height: 28px;
    font-size: 28px;
    font-weight: bolder;
    letter-spacing: 7px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    font-family: "DS-Digital";
    color: #333
}

.column {
    transition: transform 300ms;
}

.num {
    height: 28px;
}
</style>